import { defineStore } from 'pinia';
import { store } from '@/stores';
import designSetting from '@/settings/designSetting';
import type { TModeUnit } from '@/stores/modules/app';
// @ts-ignore
import type { IModeConfigValue } from '@/settings/designSetting';
import { config } from '@/settings/designSetting';
import { useAppStoreOut } from './app';

interface DesignSettingState {
  // 深色主题
  darkTheme: boolean;
  // 系统风格
  appTheme: string;
  // 系统内置风格
  appThemeList: string[];
  // 系统主题模式
  mode: TModeUnit;
  // 头部主题配置
  headerConfig: IModeConfigValue;
  // 侧边栏主题配置
  asideConfig: IModeConfigValue;
  // 文章页主题配置
  articleConfig: IModeConfigValue;
  // 页脚主题配置
}

const appStore = useAppStoreOut();
const { themeMode } = appStore;

const { darkTheme, appTheme, appThemeList } = designSetting;

export const useDesignSettingStore = defineStore({
  id: 'app-design-settings',
  state: (): DesignSettingState => ({
    darkTheme,
    appTheme,
    appThemeList,
    mode: themeMode,
    commonConfig: config[themeMode]?.commonConfig || {},
    headerConfig: config[themeMode]?.headerConfig || {},
    asideConfig: config[themeMode]?.asideConfig || {},
    articleConfig: config[themeMode]?.articleConfig || {},
    componentConfig: config[themeMode]?.componentConfig || {},
  }),
  getters: {
    getDarkTheme(): boolean {
      return this.darkTheme;
    },
    getAppTheme(): string {
      return this.appTheme;
    },
    getAppThemeList(): string[] {
      return this.appThemeList;
    },
    getCommonConfig(): IModeConfigValue | undefined {
      return this.commonConfig && Object.keys(this.commonConfig).length === 0 ? config[this.mode]?.commonConfig : this.commonConfig;
    },
    getHeaderConfig(): IModeConfigValue | undefined {
      return this.headerConfig && Object.keys(this.headerConfig).length === 0 ? config[this.mode]?.headerConfig : this.headerConfig;
    },
    getAsideConfig(): IModeConfigValue | undefined {
      return this.asideConfig && Object.keys(this.asideConfig).length === 0 ? config[this.mode]?.asideConfig : this.asideConfig;
    },
    getArticleConfig(): IModeConfigValue | undefined {
      return this.articleConfig && Object.keys(this.articleConfig).length === 0 ? config[this.mode]?.articleConfig : this.articleConfig;
    },
    getComponentConfig(): IModeConfigValue | undefined {
      return this.componentConfig && Object.keys(this.componentConfig).length === 0 ? config[this.mode]?.componentConfig : this.componentConfig;
    },
  },
  actions: {},
  // @ts-ignore
  persist: {
    key: 'PINIA-DESIGN-SETTING',
  },
});

// 供给外部使用
export const useDesignSettingStoreOut = () => useDesignSettingStore(store);
